// ======================
// 颜色变量系统 (CSS Variables)
// ======================

:root ,
.light {
  // 基础颜色
  --white: #ffffff;
  --black: #000000;
  
  // 主色系
  --primary-color: #409EFF;
  --primary-light-color: #ffffff;
  --primary-main-color: #f8f8f8;
  --primary-dark-color: #3375b9;
  --primary-darker-color: #2c5a8f;
  
  // 功能色
  --success-color: #67C23A;
  --warning-color: #E6A23C;
  --danger-color: #F56C6C;
  --info-color: #909399;
  
  // 文本色
  --text-color-primary: #303133;
  --text-color-regular: #606266;
  --text-color-secondary: #909399;
  --text-color-placeholder: #C0C4CC;
  
  // 边框色fv
  --border-color-base: #DCDFE6;
  --border-color-light: #E4E7ED;
  --border-color-lighter: #f1f1f1;
  --border-color-extra-light: #F2F6FC;
  
  // 背景色
  --bg-base-color: #f5f7fa;
  --bg-primary-color: #eeeeee;
  --bg-active-color: #13141423;
  --bg-page-color: #f4f4f5;
  --bg-overlay-color: #000000;
  --bg-tabbar-color:#e6e6e7;
  --bg-indicator-color: #f3f2f2;
  
  // 菜单悬停色
  
  // 禁用状态
  --disabled-fill-color: #f5f7fa;
  --disabled-color: #c0c4cc;
  --disabled-border-color: #e4e7ed;
  
  // 阴影
  --box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  --box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1); 

}

// ======================
// 暗黑主题变量覆盖
// ======================
[data-theme="dark"] {
  // 基础颜色
  --white: #ffffff;
  --black: #000000;
  
  // 主色系
  --primary-color: #222324;
  --primary-light-color: #252525;
  --primary-main-color: #111010;
  --primary-dark-color: #7d8186;
  --primary-darker-color: #adb3bb;
  
  // 功能色
  --success-color: #67C23A;
  --warning-color: #E6A23C;
  --danger-color: #F56C6C;
  --info-color: #909399;
  
  // 文本色
  --text-color-primary: #e4e7ee;
  --text-color-regular: #606266;
  --text-color-secondary: #909399;
  --text-color-placeholder: #C0C4CC;

  // 边框色fv
  --border-color-base: #454546;
  --border-color-light: #E4E7ED;
  --border-color-lighter: #f1f1f1;
  --border-color-extra-light: #F2F6FC;
  
  // 背景色
  --bg-base-color: #1a1a1a;
  --bg-primary-color: #1f1d1dff;
  --bg-active-color: #131414c5;
  --bg-page-color: #46464686;
  --bg-overlay-color: #000000;
  --bg-tabbar-color:#414142;
  --bg-indicator-color: #302d2d;
  
  // 菜单悬停色
  
  // 禁用状态
  --disabled-fill-color: #f5f7fa;
  --disabled-color: #c0c4cc;
  --disabled-border-color: #e4e7ed;
  
  // 阴影
  --box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  --box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1); 
}

// ======================
// 尺寸系统 (SCSS Variables)
// ======================

  $--el-menu-item-height:32.5px ;
  $--el-menu-sub-item-height:32.5px ;

// 布局尺寸
$--header-height: 60px;
$--sidebar-width: 220px;
$--sidebar-collapse-width: 64px;
$--footer-height: 60px;
$--app-main-padding: 20px;

// 边框
$--border-width-base: 1px;
$--border-style-base: solid;
$--border-radius-base: 4px;
$--border-radius-small: 2px;
$--border-radius-round: 20px;
$--border-radius-circle: 100%;

// 字体
$--font-size-extra-large: 20px;
$--font-size-large: 18px;
$--font-size-medium: 16px;
$--font-size-base: 14px;
$--font-size-small: 13px;
$--font-size-extra-small: 12px;

// 间距
$--spacing-base: 16px;
$--spacing-small: 8px;
$--spacing-large: 24px;

// 过渡
$--transition-all: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
$--transition-fade: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
$--transition-md-fade: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), 
                       opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);

// ======================
// Element Plus 变量覆盖 (可选)
// ======================
$--colors: (
  'primary': (
    'base': var(--primary-color),
  ),
  'success': (
    'base': var(--success-color),
  ),
  'warning': (
    'base': var(--warning-color),
  ),
  'danger': (
    'base': var(--danger-color),
  ),
  'error': (
    'base': var(--danger-color),
  ),
  'info': (
    'base': var(--info-color),
  ),
);

// 导出给JS使用的变量
:export {
  primaryColor: var(--primary-color);
  successColor: var(--success-color);
  headerHeight: $--header-height;
  sidebarWidth: $--sidebar-width;
}